<template>
  <div class="about">
    <div class="site-content">
      <div class="content-warp">
        <div class="about-site about-info">
          <section-title><span>🔥</span>关于博客</section-title>

          <div class="info-card">
            <section-title><span>💖</span>前端原作者</section-title>
            <p>偶然之间看见了<a target="_blank" class="out-link" href="https://zhebk.cn/Web/Akina.html">Akina For Typecho</a>博客的主题，风格很是喜欢。
            </p>
            <p>然后就开始用Vue搭建这种风格的博客，在此呢也将这套模板开放给大家。</p>
            <p><a target="_blank" href="https://gitee.com/fengziy/Gblog" style="color: #ff6d6d;">Gitee仓库</a> | <a
                target="_blank" href="https://github.com/fengziye/Gblog" style="color: #ff6d6d;">Github仓库</a>记得star★哟
            </p>
          </div>
          <div class="info-card">
            <section-title><span>💖</span>后端基于小诺快速开发平台</section-title>
            <p>感谢<a style="color: #ff6d6d;" target="_blank" href="https://www.xiaonuo.vip/">小诺</a>团队的开源贡献</p>
          </div>
        </div>
        <div class="about-me about-info">
          <section-title id="Guestbook" style="text-decoration: underline"><router-link to="/article/15#pl" ><span>🔥</span>给我留言</router-link></section-title>
          <div class="info-card" style="display: none">
            <a-form-model :model="info" @submit.native.prevent :rules="rules" ref="info">
              <a-form-model-item prop="name" required has-feedback>
                <a-input placeholder="名称(必填)" v-model="info.name">
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>
              <a-form-model-item prop="email" has-feedback>
                <a-input type="text" placeholder="邮箱(必填)" v-model="info.email">
                  <a-icon slot="prefix" type="mail" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>

              <a-form-model-item prop="homePage" has-feedback>
                <a-input type="text" placeholder="网站链接(必填)" v-model="info.homePage">
                  <a-icon slot="prefix" type="home" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>

              <a-form-model-item prop="desc" has-feedback>
                <a-input type="text" placeholder="网站描述(必填)" v-model="info.desc">
                  <a-icon slot="prefix" type="file-text" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>
            </a-form-model>
            <a-button html-type="submit" type="primary" @click="handleSubmit" :disabled="disabled" :loading="disabled">
              提交
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sectionTitle from '@/components/section-title'
// import Quote from "@/components/quote";
// import {fetchFriend} from '../api'
export default {
  name: "About",
  data() {
    let validateName = (rule, value, callback) => {
      if (value === '' || value.length >= 10) {
        callback(new Error('名称不能为空且不能大于10个字符！'));
      } else {
        callback();
      }
    };
    let validateHomePage = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        callback();
      }
    };
    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        callback();
      }
    };
    return {
      list: [],
      info: {
        name: '',
        homePage: '',
        email: '',
        desc: ''
      },
      rules: {
        name: [{validator: validateName, trigger: 'change'}],
        homePage: [{trigger: 'change', type: 'url', message: '请输入合法的地址！'}],
        email: [{trigger: 'change', type: 'email', message: '请输入合法的邮箱！'}],
      }
    }
  },
  components: {
    // Quote,
    sectionTitle
  },
  methods: {
    handleSubmit() {

    }
  },
  mounted() {
  }
}
</script>
<style scoped lang="less">
.about {
  padding-top: 40px;
}

.content-warp {
  margin-top: 80px;

  .about-info {
    margin: 30px 0;

    span {
      color: red;
      margin-right: 10px;
    }

    .info-card {
      min-height: 100px;
      padding: 20px;
      border-radius: 3px;
      margin: 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      p {
        line-height: 1.7rem;
      }
    }
  }

  .contactForm {
    width: 100%;
    padding: 20px;

    .form-item {
      align-items: center;
      display: flex;

      &:not(:last-child) {
        margin-bottom: 20px;
      }

      label {
        width: 80px;
      }

      .v {
        min-height: 40px;
        line-height: 20px;
        border-radius: 3px;
        padding: 2px 10px;
        outline: none;
        border: 1px solid #8fd0cc;
        width: 100%;
        resize: vertical;
      }

      button {
        width: 100px;
        height: 40px;
        border-radius: 3px;
        outline: 0;
        border-style: none;
        cursor: pointer;
        background-color: #409eff;
        color: white;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

/*******/
@media (max-width: 800px) {
  .content-warp {
    margin-top: 0;
  }
}
</style>
